<template>
  <div
    class="application"
    v-loading="loading"
    element-loading-background="rgba(255, 255, 255, 0)"
  >
    <el-form ref="form" :model="details" label-width="120px" class="appForm">
      <el-form-item label="在线报名">
        <div class="online_warp">
          <el-switch v-model="details.enabled" @change="handleEnabled"> </el-switch>
          <div class="text_wrap" @click="handleGoTo">
            <span>查看全部选手</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="报名开始时间" class="start">
        <el-date-picker @change="handleBeginTime" v-model="details.beginTime" type="datetime"> </el-date-picker>
      </el-form-item>
      <el-form-item label="报名截止时间" class="end">
        <el-date-picker @change='handleEndTime' v-model="details.endTime" type="datetime"> </el-date-picker>
      </el-form-item>
      <el-form-item label="开启审核">
        <el-switch v-model="details.verified" @change="handleVerified"> </el-switch>
      </el-form-item>
      <el-form-item label="报名表单">
        <div>
          <formbox
            :formList="formList"
            :formType="formType"
          ></formbox>
          <el-row class="appendForm">
            <el-button @click="handleAddForm" type="primary" class="btn"
              >添加表单</el-button
            >
          </el-row>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import formbox from "@/components/form";
import { mapGetters } from "vuex";
import { formatDate } from "@/utils/filter";
import { gengerateID } from "@/utils";
export default {
  data() {
    return {
      details: {},
      formList: [],
      formType: [],
      formMode: [],
    };
  },
  computed: {
    ...mapGetters("status", {
      loading: "loading",
    }),
  },
  components: {
    formbox,
  },
  created() {
    this.getSignUpConf();
    this.getForm();
    this.getFormType();
    // this.getFormMode();
  },
  methods: {
    //添加报名表单
    handleAddForm() {
      //新增
      this.formList.push({
        code: gengerateID("ID"),
        defaultValue: "",
        deleted: false,
        disabled: false,
        id: 0,
        mode: "INPUT",
        name: "默认",
        placeholder: "",
        position: 0,
        regExp: "",
        remark: "",
        required: true,
        type: "INPUT_TEXT",
        value: "",
        voteId: this.$route.query.id,
      });
      this.saveFormFn()
    },
    //获取报名设置
    getSignUpConf() {
      this.$api("vote.getSignUpConf", {
        voteId: this.$route.query.id,
      }).then((res) => {
        console.log(res);
        this.details = res;
      });
    },
    //获取表单
    getForm() {
      this.$api("vote.getForm", {
        voteId: this.$route.query.id,
      }).then((res) => {
        res.forEach((item) => {
          item.value = item.value ? JSON.parse(item.value) : item.value;
          item.defaultValue = item.defaultValue
            ? JSON.parse(item.defaultValue)
            : item.defaultValue;
        });
        this.formList = res;
        console.log(this.formList);
      });
    },
    //获取报名设置
    getFormType() {
      this.$api("vote.getFormType").then((res) => {
        this.formType = res;
      });
    },
    //getFormMode
    // getFormMode() {
    //   this.$api("vote.getFormMode").then((res) => {
    //     this.formMode = res;
    //   });
    // },
    //在保存表单的时候有个疑问，将formList作为参数传递给子组件之后，我们的修改操作都是在子组件中完成的
    //并没有将子组件修改之后的formList传递给父组件，父组件自己变化了，
    //因为，我们将formList这数组的引用地址传递了，在子组件中的所有操作都是在这引用地址中去进行的
    saveFormFn() {
      const list=JSON.parse(JSON.stringify(this.formList))
      this.$api("vote.saveForm", list).then((res) => {
        console.log(res);
        this.getForm()
        this.$store.commit("status/SET_URL", new Date().getTime());
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 1000,
          });
      });
    },
    //删除报名表单
    deleteForm(id){
      this.$api('vote.deleteForm',{
        ids:[id]
      }).then(res=>{
        console.log(res)
        this.$store.commit("status/SET_URL", new Date().getTime());
        this.$message({
            message: "删除成功",
            type: "success",
            duration: 1000,
          });
      })
    },
    //自动保存
    saveApi() {
      const beginTime = new Date(this.details.beginTime).getTime();
      const endTime = new Date(this.details.endTime).getTime();
      if (beginTime > endTime) {
        this.$message({
          message: "报名开始时间不能大于报名结束时间",
          duration: 1000,
          type: "error",
        });
      } else {
        this.$api("vote.saveSignUpConf", {
          ...this.details,
          beginTime: formatDate(beginTime),
          endTime: formatDate(endTime),
          voteId: this.$route.query.id,
        }).then(() => {
          this.$store.commit("status/SET_URL", new Date().getTime());
          this.$message({
            message: "保存成功",
            type: "success",
            duration: 1000,
          });
        });
      }
    },
    //是否开启在线报名
    handleEnabled() {
      this.saveApi()
    },
    //报名开始时间
    handleBeginTime() {
      if (this.details.beginTime) {
        this.saveApi();
      }
    },
     //报名结束时间
    handleEndTime() {
      if (this.details.endTime) {
        this.saveApi();
      }
    },
    //是否开启审核
    handleVerified(){
      this.saveApi()
    },
    handleGoTo(){
       this.$router.push({
        path: "/manage/setup",
        query: {
          t: 'player',
          id: this.$route.query.id,
        },
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.application {
  width: 820px;
  min-height: 550px;
  ::v-deep.el-form-item__label {
    padding-right: 20px;
  }
  .online_warp {
    display: flex;
    align-items: center;
    .text_wrap {
      margin-left: 40px;
      cursor: pointer;
      &:hover{
        color: $themeColor;
      }
    }
  }
  .appForm {
    .online {
      position: relative;
      .switch {
        position: absoulte;
        left: 280px;
      }
    }
    .search {
      display: flex;
      margin-bottom: 20px;
      .searchItem {
        ::v-deep.el-input {
          .el-input__icon {
            line-height: 26px;
          }
          .el-input__inner {
            border-radius: 30px;
            height: 25px;
            width: 140px;
            text-align: center;
          }
        }
      }
      .text {
        width: 180px;
        height: 30px;
        margin-left: 40px;
        span {
          line-height: 2;
          font-size: 14px;
          color: $themeColor;
          font-weight: 600;
        }
      }
    }
    .start {
      ::v-deep.el-input__icon {
        display: none;
      }
      ::v-deep.el-input__inner {
        border-radius: 30px;
        width: 450px;
        height: 30px;
      }
    }
    .end {
      ::v-deep.el-input__icon {
        display: none;
      }
      ::v-deep.el-input__inner {
        border-radius: 30px;
        width: 450px;
        height: 30px;
      }
    }
    .videoRow {
      .shipin {
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep.el-input__inner {
          border-radius: 30px;
          height: 30px;
        }
        .videoBox {
          width: 60px;
        }
        span {
          margin-left: 10px;
        }
      }
    }
    .imgRow {
      .image {
        display: flex;
        justify-content: center;
        align-items: center;
        ::v-deep.el-input__inner {
          border-radius: 30px;
          height: 30px;
        }
        .imgBox {
          width: 60px;
        }
        span {
          margin-left: 10px;
        }
      }
    }
  }
  .appendForm {
    // margin-left: 120px;
    // margin-top: 20px;
    .btn {
      width: 200px;
      height: 30px;
      line-height: 0.5;
    }
  }
}
</style>
